<template>
  <div class="tech-trends">
    <div class="page-header">
      <h1>技术动态</h1>
      <p>了解最新技术发展，掌握前沿动态</p>
    </div>

    <!-- 技术趋势概览 -->
    <div class="trends-overview">
      <h2>技术趋势概览</h2>
      <div class="trend-cards">
        <div class="trend-card" v-for="trend in trends" :key="trend.id">
          <div class="trend-icon">
            <i :class="trend.icon"></i>
          </div>
          <div class="trend-content">
            <h3>{{ trend.title }}</h3>
            <p>{{ trend.description }}</p>
            <div class="trend-stats">
              <div class="stat">
                <span class="stat-label">热度</span>
                <div class="stat-bar">
                  <div class="stat-fill" :style="{width: trend.heat + '%'}"></div>
                </div>
              </div>
              <div class="stat">
                <span class="stat-label">成熟度</span>
                <div class="stat-bar">
                  <div class="stat-fill" :style="{width: trend.maturity + '%'}"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 最新动态 -->
    <div class="latest-news">
      <h2>最新动态</h2>
      <div class="news-filters">
        <button 
          v-for="filter in newsFilters" 
          :key="filter.id"
          class="filter-btn"
          :class="{active: activeFilter === filter.id}"
          @click="setActiveFilter(filter.id)"
        >
          {{ filter.name }}
        </button>
      </div>
      <div class="news-list">
        <div class="news-item" v-for="news in filteredNews" :key="news.id">
          <div class="news-image">
            <img :src="news.image" :alt="news.title">
          </div>
          <div class="news-content">
            <div class="news-meta">
              <span class="news-category">{{ news.category }}</span>
              <span class="news-date">{{ formatDate(news.date) }}</span>
            </div>
            <h3>{{ news.title }}</h3>
            <p>{{ news.summary }}</p>
            <div class="news-tags">
              <span class="tag" v-for="tag in news.tags" :key="tag">{{ tag }}</span>
            </div>
          </div>
          <div class="news-actions">
            <button class="btn btn-primary" @click="readNews(news)">
              阅读
            </button>
            <button class="btn btn-secondary" @click="shareNews(news)">
              分享
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 技术文章 -->
    <div class="tech-articles">
      <h2>技术文章</h2>
      <div class="article-grid">
        <div class="article-card" v-for="article in articles" :key="article.id">
          <div class="article-image">
            <img :src="article.image" :alt="article.title">
            <div class="article-type">{{ article.type }}</div>
          </div>
          <div class="article-content">
            <h3>{{ article.title }}</h3>
            <p>{{ article.excerpt }}</p>
            <div class="article-meta">
              <div class="author">
                <img :src="article.author.avatar" :alt="article.author.name">
                <span>{{ article.author.name }}</span>
              </div>
              <div class="meta-info">
                <span class="read-time">{{ article.readTime }}</span>
                <span class="views">{{ article.views }} 阅读</span>
              </div>
            </div>
            <div class="article-tags">
              <span class="tag" v-for="tag in article.tags" :key="tag">{{ tag }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 研究报告 -->
    <div class="research-reports">
      <h2>研究报告</h2>
      <div class="report-list">
        <div class="report-item" v-for="report in reports" :key="report.id">
          <div class="report-icon">
            <i class="fas fa-file-pdf"></i>
          </div>
          <div class="report-content">
            <h3>{{ report.title }}</h3>
            <p>{{ report.description }}</p>
            <div class="report-meta">
              <span class="organization">{{ report.organization }}</span>
              <span class="publish-date">{{ formatDate(report.publishDate) }}</span>
              <span class="pages">{{ report.pages }} 页</span>
            </div>
            <div class="report-highlights">
              <h4>核心观点</h4>
              <ul>
                <li v-for="highlight in report.highlights" :key="highlight">{{ highlight }}</li>
              </ul>
            </div>
          </div>
          <div class="report-actions">
            <button class="btn btn-primary" @click="downloadReport(report)">
              <i class="fas fa-download"></i>
              下载
            </button>
            <button class="btn btn-secondary" @click="previewReport(report)">
              <i class="fas fa-eye"></i>
              预览
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 行业分析 -->
    <div class="industry-analysis">
      <h2>行业分析</h2>
      <div class="analysis-grid">
        <div class="analysis-card" v-for="analysis in industryAnalysis" :key="analysis.id">
          <div class="analysis-header">
            <h3>{{ analysis.title }}</h3>
            <span class="analysis-period">{{ analysis.period }}</span>
          </div>
          <div class="analysis-content">
            <div class="key-metrics">
              <div class="metric" v-for="metric in analysis.metrics" :key="metric.name">
                <div class="metric-name">{{ metric.name }}</div>
                <div class="metric-value">{{ metric.value }}</div>
                <div class="metric-change" :class="metric.change > 0 ? 'positive' : 'negative'">
                  <i :class="metric.change > 0 ? 'fas fa-arrow-up' : 'fas fa-arrow-down'"></i>
                  {{ Math.abs(metric.change) }}%
                </div>
              </div>
            </div>
            <div class="analysis-summary">
              <h4>分析摘要</h4>
              <p>{{ analysis.summary }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 订阅中心 -->
    <div class="subscription-center">
      <h2>订阅中心</h2>
      <div class="subscription-options">
        <div class="subscription-card" v-for="option in subscriptionOptions" :key="option.id">
          <div class="subscription-header">
            <h3>{{ option.name }}</h3>
            <span class="frequency">{{ option.frequency }}</span>
          </div>
          <div class="subscription-content">
            <p>{{ option.description }}</p>
            <div class="subscription-features">
              <div class="feature" v-for="feature in option.features" :key="feature">
                <i class="fas fa-check"></i>
                {{ feature }}
              </div>
            </div>
          </div>
          <div class="subscription-actions">
            <button 
              class="btn btn-primary"
              :class="{subscribed: option.subscribed}"
              @click="toggleSubscription(option)"
            >
              {{ option.subscribed ? '已订阅' : '订阅' }}
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// 响应式数据
const activeFilter = ref('all')

// 技术趋势
const trends = ref([
  {
    id: 1,
    title: 'AI内容检测',
    description: '基于深度学习的内容真实性检测技术',
    icon: 'fas fa-brain',
    heat: 95,
    maturity: 75
  },
  {
    id: 2,
    title: '区块链验证',
    description: '基于区块链的信息溯源和验证技术',
    icon: 'fas fa-link',
    heat: 80,
    maturity: 60
  },
  {
    id: 3,
    title: '声纹识别',
    description: '语音身份验证和伪造检测技术',
    icon: 'fas fa-microphone',
    heat: 85,
    maturity: 80
  },
  {
    id: 4,
    title: '深度伪造检测',
    description: 'Deepfake检测和防范技术',
    icon: 'fas fa-mask',
    heat: 90,
    maturity: 65
  }
])

// 新闻过滤器
const newsFilters = ref([
  { id: 'all', name: '全部' },
  { id: 'ai', name: 'AI技术' },
  { id: 'blockchain', name: '区块链' },
  { id: 'security', name: '安全防护' },
  { id: 'policy', name: '政策法规' }
])

// 新闻数据
const news = ref([
  {
    id: 1,
    title: 'ChatGPT在反诈骗领域的应用探索',
    summary: '大语言模型在识别和预防诈骗方面的最新进展',
    category: 'AI技术',
    filter: 'ai',
    date: '2024-01-20',
    image: '/api/placeholder/200/120',
    tags: ['ChatGPT', '反诈骗', '大语言模型']
  },
  {
    id: 2,
    title: '区块链技术在信息验证中的应用',
    summary: '探讨区块链如何确保信息的真实性和不可篡改性',
    category: '区块链',
    filter: 'blockchain',
    date: '2024-01-19',
    image: '/api/placeholder/200/120',
    tags: ['区块链', '信息验证', '去中心化']
  },
  {
    id: 3,
    title: '2024年网络安全防护新趋势',
    summary: '分析网络安全领域的最新发展和防护策略',
    category: '安全防护',
    filter: 'security',
    date: '2024-01-18',
    image: '/api/placeholder/200/120',
    tags: ['网络安全', '防护策略', '威胁检测']
  }
])

// 技术文章
const articles = ref([
  {
    id: 1,
    title: '深度学习在图像伪造检测中的应用',
    excerpt: '详细介绍深度学习算法如何识别和检测图像篡改',
    type: '技术深度',
    image: '/api/placeholder/300/200',
    author: {
      name: '张研究员',
      avatar: '/api/placeholder/40/40'
    },
    readTime: '15分钟',
    views: 2134,
    tags: ['深度学习', '图像检测', '算法']
  },
  {
    id: 2,
    title: '声纹识别技术的发展历程',
    excerpt: '从传统方法到现代AI技术的演进过程',
    type: '技术综述',
    image: '/api/placeholder/300/200',
    author: {
      name: '李专家',
      avatar: '/api/placeholder/40/40'
    },
    readTime: '12分钟',
    views: 1678,
    tags: ['声纹识别', '语音处理', '生物识别']
  }
])

// 研究报告
const reports = ref([
  {
    id: 1,
    title: '2024年AI反诈骗技术发展报告',
    description: '全面分析AI技术在反诈骗领域的应用现状和发展趋势',
    organization: '中国信息安全研究院',
    publishDate: '2024-01-15',
    pages: 85,
    highlights: [
      'AI检测准确率达到95%以上',
      '深度伪造检测技术取得重大突破',
      '多模态融合检测成为发展方向'
    ]
  },
  {
    id: 2,
    title: '区块链在信息验证中的应用研究',
    description: '深入研究区块链技术如何提升信息验证的可靠性',
    organization: '清华大学计算机学院',
    publishDate: '2024-01-10',
    pages: 62,
    highlights: [
      '去中心化验证机制更加可靠',
      '智能合约自动化验证流程',
      '跨链验证技术逐步成熟'
    ]
  }
])

// 行业分析
const industryAnalysis = ref([
  {
    id: 1,
    title: '反诈骗技术市场',
    period: '2024年Q1',
    metrics: [
      { name: '市场规模', value: '128亿元', change: 15.2 },
      { name: '技术投入', value: '45亿元', change: 22.8 },
      { name: '用户增长', value: '235万', change: 18.6 }
    ],
    summary: '反诈骗技术市场继续快速增长，AI技术成为主要驱动力，用户对技术防护的需求不断提升。'
  },
  {
    id: 2,
    title: '信息安全行业',
    period: '2024年Q1',
    metrics: [
      { name: '行业规模', value: '680亿元', change: 12.5 },
      { name: '研发投入', value: '156亿元', change: 8.9 },
      { name: '从业人员', value: '89万人', change: -2.3 }
    ],
    summary: '信息安全行业保持稳定增长，技术创新加速，但人才短缺问题仍然突出。'
  }
])

// 订阅选项
const subscriptionOptions = ref([
  {
    id: 1,
    name: '技术周报',
    frequency: '每周更新',
    description: '获取最新的技术动态和研究成果',
    features: ['技术趋势分析', '研究论文摘要', '行业动态'],
    subscribed: false
  },
  {
    id: 2,
    name: '行业月报',
    frequency: '每月更新',
    description: '深度分析行业发展趋势和市场变化',
    features: ['市场分析报告', '投资动向', '政策解读'],
    subscribed: true
  },
  {
    id: 3,
    name: '专题研究',
    frequency: '不定期',
    description: '针对特定技术或现象的深度研究',
    features: ['专业分析', '案例研究', '技术评估'],
    subscribed: false
  }
])

// 计算属性
const filteredNews = computed(() => {
  if (activeFilter.value === 'all') {
    return news.value
  }
  return news.value.filter(item => item.filter === activeFilter.value)
})

// 方法
const setActiveFilter = (filterId) => {
  activeFilter.value = filterId
}

const readNews = (news) => {
  alert(`阅读新闻: ${news.title}`)
}

const shareNews = (news) => {
  alert(`分享新闻: ${news.title}`)
}

const downloadReport = (report) => {
  alert(`下载报告: ${report.title}`)
}

const previewReport = (report) => {
  alert(`预览报告: ${report.title}`)
}

const toggleSubscription = (option) => {
  option.subscribed = !option.subscribed
}

const formatDate = (dateString) => {
  return new Date(dateString).toLocaleDateString()
}

onMounted(() => {
  // 初始化数据
})
</script>

<style scoped>
.tech-trends {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  background: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
}

.page-header h1 {
  color: #1e3c72;
  margin-bottom: 10px;
}

.trends-overview {
  background: white;
  border-radius: 8px;
  padding: 30px;
  margin-bottom: 40px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.trends-overview h2 {
  color: #1e3c72;
  margin-bottom: 20px;
}

.trend-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.trend-card {
  display: flex;
  gap: 20px;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
  transition: transform 0.2s ease;
}

.trend-card:hover {
  transform: translateY(-2px);
}

.trend-icon {
  width: 60px;
  height: 60px;
  background: #1e3c72;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.trend-content {
  flex: 1;
}

.trend-content h3 {
  color: #1e3c72;
  margin-bottom: 10px;
}

.trend-content p {
  color: #666;
  margin-bottom: 15px;
}

.trend-stats {
  display: grid;
  gap: 10px;
}

.stat {
  display: flex;
  align-items: center;
  gap: 10px;
}

.stat-label {
  min-width: 60px;
  font-size: 14px;
  color: #666;
}

.stat-bar {
  flex: 1;
  height: 6px;
  background: #e9ecef;
  border-radius: 3px;
  overflow: hidden;
}

.stat-fill {
  height: 100%;
  background: #1e3c72;
  transition: width 0.3s ease;
}

.latest-news {
  background: white;
  border-radius: 8px;
  padding: 30px;
  margin-bottom: 40px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.latest-news h2 {
  color: #1e3c72;
  margin-bottom: 20px;
}

.news-filters {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 8px 16px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-btn:hover {
  border-color: #1e3c72;
  color: #1e3c72;
}

.filter-btn.active {
  background: #1e3c72;
  color: white;
  border-color: #1e3c72;
}

.news-list {
  display: grid;
  gap: 20px;
}

.news-item {
  display: flex;
  gap: 20px;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
  align-items: flex-start;
}

.news-image {
  width: 200px;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-content {
  flex: 1;
}

.news-meta {
  display: flex;
  gap: 15px;
  margin-bottom: 10px;
}

.news-category {
  background: #17a2b8;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.news-date {
  color: #666;
  font-size: 14px;
}

.news-content h3 {
  color: #1e3c72;
  margin-bottom: 10px;
}

.news-content p {
  color: #666;
  margin-bottom: 15px;
  line-height: 1.5;
}

.news-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.tag {
  background: #f8f9fa;
  color: #666;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
}

.news-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}

.btn-primary {
  background: #1e3c72;
  color: white;
}

.btn-secondary {
  background: #6c757d;
  color: white;
}

.tech-articles {
  background: white;
  border-radius: 8px;
  padding: 30px;
  margin-bottom: 40px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.tech-articles h2 {
  color: #1e3c72;
  margin-bottom: 20px;
}

.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px;
}

.article-card {
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s ease;
}

.article-card:hover {
  transform: translateY(-2px);
}

.article-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.article-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-type {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #1e3c72;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.article-content {
  padding: 20px;
}

.article-content h3 {
  color: #1e3c72;
  margin-bottom: 10px;
}

.article-content p {
  color: #666;
  margin-bottom: 15px;
  line-height: 1.5;
}

.article-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.author img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.meta-info {
  display: flex;
  gap: 15px;
  font-size: 14px;
  color: #666;
}

.article-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.research-reports {
  background: white;
  border-radius: 8px;
  padding: 30px;
  margin-bottom: 40px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.research-reports h2 {
  color: #1e3c72;
  margin-bottom: 20px;
}

.report-list {
  display: grid;
  gap: 20px;
}

.report-item {
  display: flex;
  gap: 20px;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
  align-items: flex-start;
}

.report-icon {
  width: 60px;
  height: 60px;
  background: #dc3545;
  color: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.report-content {
  flex: 1;
}

.report-content h3 {
  color: #1e3c72;
  margin-bottom: 10px;
}

.report-content p {
  color: #666;
  margin-bottom: 15px;
}

.report-meta {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
  font-size: 14px;
  color: #666;
}

.report-highlights h4 {
  color: #1e3c72;
  margin-bottom: 10px;
}

.report-highlights ul {
  list-style: none;
  padding: 0;
}

.report-highlights li {
  padding: 5px 0;
  color: #666;
}

.report-highlights li::before {
  content: "•";
  color: #1e3c72;
  margin-right: 8px;
}

.report-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.industry-analysis {
  background: white;
  border-radius: 8px;
  padding: 30px;
  margin-bottom: 40px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.industry-analysis h2 {
  color: #1e3c72;
  margin-bottom: 20px;
}

.analysis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
}

.analysis-card {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 20px;
}

.analysis-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.analysis-header h3 {
  color: #1e3c72;
  margin: 0;
}

.analysis-period {
  background: #f8f9fa;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: #666;
}

.key-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 15px;
  margin-bottom: 20px;
}

.metric {
  text-align: center;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
}

.metric-name {
  font-size: 12px;
  color: #666;
  margin-bottom: 5px;
}

.metric-value {
  font-size: 20px;
  font-weight: bold;
  color: #1e3c72;
  margin-bottom: 5px;
}

.metric-change {
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.metric-change.positive {
  color: #28a745;
}

.metric-change.negative {
  color: #dc3545;
}

.analysis-summary h4 {
  color: #1e3c72;
  margin-bottom: 10px;
}

.analysis-summary p {
  color: #666;
  line-height: 1.5;
}

.subscription-center {
  background: white;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.subscription-center h2 {
  color: #1e3c72;
  margin-bottom: 20px;
}

.subscription-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.subscription-card {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
}

.subscription-header {
  margin-bottom: 15px;
}

.subscription-header h3 {
  color: #1e3c72;
  margin-bottom: 5px;
}

.frequency {
  color: #666;
  font-size: 14px;
}

.subscription-content p {
  color: #666;
  margin-bottom: 15px;
}

.subscription-features {
  text-align: left;
  margin-bottom: 20px;
}

.feature {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: #666;
}

.feature i {
  color: #28a745;
}

.btn.subscribed {
  background: #28a745;
}

@media (max-width: 768px) {
  .trend-cards {
    grid-template-columns: 1fr;
  }
  
  .trend-card {
    flex-direction: column;
    text-align: center;
  }
  
  .news-item {
    flex-direction: column;
  }
  
  .article-grid {
    grid-template-columns: 1fr;
  }
  
  .report-item {
    flex-direction: column;
    text-align: center;
  }
  
  .analysis-grid {
    grid-template-columns: 1fr;
  }
  
  .subscription-options {
    grid-template-columns: 1fr;
  }
}
</style> 